// import Input from '/src/components/input/input-component'
// import List from '/src/components/list/list-component'

const App = () => {

  const [pokemons, setPokemons] = React.useState([]);
  const [filteredPokemons, setFilteredPokemons] = React.useState([]);

  React.useEffect(() => {
    (async () => {
      const results = await fetch("https://pokeapi.co/api/v2/pokemon")
        .then(res => res.json())
        .then(res => res.results)
      results.forEach((pokemon, index) => {
        pokemon.id = index + 1
      })
      setPokemons(results)
      setFilteredPokemons(results)
    })()
  }, [])

  const onSearchChangeHandler = (event) => {
    const filtered = pokemons.filter(pokemon => pokemon.name.includes(event.target.value))
    setFilteredPokemons(filtered)
  }

  return (<div>
    <h1>宝可梦</h1>
    <Input onSearchChangeHandler={onSearchChangeHandler}/>
    <List pokemonsList={filteredPokemons}/>
  </div>)
}

// export default App